<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Shoelace: A forward-thinking library of web components.</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="description"
      content="Shoelace provides a collection of professionally designed, every day UI components built on a framework-agnostic technology."
    />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="custom-elements-manifest" content="/dist/custom-elements.json" />
    <meta property="og:title" content="Shoelace" />
    <meta
      property="og:description"
      content="Shoelace provides a collection of professionally designed, every day UI components built on a framework-agnostic technology."
    />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://shoelace.style/" />
    <meta property="og:image" content="https://shoelace.style/assets/images/og-image.png" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@shoelace_style" />
    <meta name="twitter:creator" content="@claviska" />
    <meta name="twitter:title" content="Shoelace" />
    <meta
      name="twitter:description"
      content="Shoelace provides a collection of professionally designed, every day UI components built on a framework-agnostic technology."
    />
    <meta name="twitter:image" content="https://shoelace.style/assets/images/twitter-card.png" />

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify@4/themes/pure.css" />
    <link rel="stylesheet" href="/assets/styles/docs.css" />
    <link rel="stylesheet" href="/assets/plugins/code-block/code-block.css" />
    <link rel="stylesheet" href="/assets/plugins/search/search.css" />
    <link rel="stylesheet" href="/assets/plugins/theme-picker/theme-picker.css" />
    <link rel="icon" href="/assets/images/logo.svg" type="image/x-icon" />
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/touch-icon.png" />

    <!-- Import Shoelace -->
    <link rel="stylesheet" href="/dist/themes/light.css" />
    <link rel="stylesheet" href="/dist/themes/dark.css" />
    <script type="module" src="/dist/shoelace-autoloader.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
      // Set the initial theme to prevent flashing
      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
      const theme = localStorage.getItem('theme') || 'auto';
      document.documentElement.classList.toggle('sl-theme-dark', theme === 'dark' || (theme === 'auto' && prefersDark));
    </script>
    <script>
      window.$docsify = {
        alias: {
          '/.*/_sidebar.md': '/_sidebar.md'
        },
        auto2top: true,
        copyCode: {
          buttonText: 'Copy',
          errorText: 'Failed to copy',
          successText: 'Copied'
        },
        coverpage: false,
        executeScript: true,
        homepage: '/getting-started/overview.md',
        loadSidebar: true,
        logo: '/assets/images/wordmark.svg',
        maxLevel: 3,
        subMaxLevel: 2,
        name: 'Shoelace',
        nameLink: '/',
        notFoundPage: '404.md',
        pagination: {
          previousText: 'Previous',
          nextText: 'Next',
          crossChapter: true,
          crossChapterText: false
        },
        routerMode: 'history',
        themeColor: 'var(--sl-color-primary-500)'
      };
    </script>
    <script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/docsify.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/docsify-copy-code@2"></script>
    <script src="https://cdn.jsdelivr.net/npm/docsify-pagination@2/dist/docsify-pagination.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.25.0/components/prism-bash.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.25.0/components/prism-jsx.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.25.0/components/prism-tsx.min.js"></script>
    <script src="/assets/plugins/code-block/code-block.js"></script>
    <script src="/assets/plugins/metadata/metadata.js"></script>
    <script src="/assets/plugins/scroll-position/scroll-position.js"></script>
    <script src="/assets/plugins/search/lunr.min.js"></script>
    <script src="/assets/plugins/search/search.js"></script>
    <script src="/assets/plugins/theme-picker/theme-picker.js"></script>
  </body>
</html>
